<template>
    <h2>setup与ref的基本使用</h2>
    <h3>{{ count }}</h3>
    <button @click="updateCount">更新数据</button>
</template>

<script lang="ts">
// definecomponent函数，就是定义一个组件，内部可以传入一个配置对象
import { defineComponent, ref } from "vue";

// 暴漏出去一个定义好的组件
export default defineComponent({
    name: "App",
    // 需求：页面打开有一个数据，点击按钮更新数据
    // vue2实现
    // data() {
    //     return {
    //         count: 0,
    //     };
    // },
    // methods: {
    //     updateCount() {
    //         this.count++;
    //     },
    // },

    // vue3实现
    // setup是组合API的入口函数
    setup() {
        // 变量
        // let count = 0;
        const count = ref(1);
        function updateCount() {
            count++;
        }
        // 返回的是一个对象
        return {
            // 属性
            count,
            // 方法
            updateCount,
        };
    },
});
</script>
